<template>
  <div class="tlAdd">
    <div>
      <h1 style="font-size: 30px; padding: 20px">新增盘点单</h1>
      <div style="float: left; width: 40%; padding: 20px">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="form"
          :rules="rules"
        >
          <el-form-item prop="inventoryDate" label="单据日期">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.inventoryDate"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="制单人ID" prop="ID">
            <el-input v-model="ID" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="float: right; width: 40%; padding: 20px">
        <el-form label-width="80px" :model="form" :rules="rules">
          <el-form-item label="退料单号" prop="inventoryNo">
            <el-input
              v-model="form.inventoryNo"
              disabled
              placeholder="自动获取"
              style="float: left; width: 70%"
            ></el-input>
            <el-button type="success" style="margin-left: 20px" @click="getId"
              >获取单号</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="clear: both"></div>
    <div>
      <h1 style="font-size: 30px; padding: 20px">器材列表</h1>
      <el-form
        :inline="true"
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="器材名称" prop="facilityName">
          <el-select
            v-model="form.facilityName"
            placeholder="器材名称"
            style="width: 350px; padding-right: 20px"
            @change="select2"
          >
            <el-option
              :key="v"
              v-for="v in select1"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="器材型号" prop="facilityModel">
          <el-select
            v-model="form.facilityModel"
            placeholder="器材型号"
            style="width: 350px; padding-right: 20px"
            @change="select3"
          >
            <el-option
              :key="v"
              v-for="v in Select2"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次号" prop="batchnum">
          <el-select
            v-model="form.batchnum"
            placeholder="批次号"
            style="width: 350px; padding-right: 20px"
            @change="getCode"
          >
            <el-option
              :key="v"
              v-for="v in Select3"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库存数量" prop="number">
          <el-input
            v-model="form.number"
            disabled
            style="width: 350px; padding-right: 20px"
          ></el-input>
        </el-form-item>
        <el-form-item label="盘点数量" prop="num">
          <el-input
            v-model="form.num"
            style="width: 350px; padding-right: 20px"
          ></el-input>
        </el-form-item>
        <el-form-item label="盘点盈亏" prop="unitPrice">
          <el-input v-model="Profit" style="width: 350px; padding-right: 20px">
          </el-input>
        </el-form-item>
        <el-button style="float: right" type="success" @click="topush"
          >加入明细</el-button
        >
      </el-form>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="inventoryNo" label="盘点单号"> </el-table-column>
        <el-table-column prop="wfacilityManagementId" label="器材编号">
        </el-table-column>
        <el-table-column prop="facilityName" label="器材名称">
        </el-table-column>
        <el-table-column prop="facilityModel" label="规格型号">
        </el-table-column>
        <el-table-column prop="unit" label="单位"> </el-table-column>
        <el-table-column prop="number" label="库存"> </el-table-column>
        <el-table-column prop="num" label="盘点数"> </el-table-column>
        <el-table-column prop="Profit" label="盘点盈亏"> </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 10px">
        <el-button style="margin-right: 20px; width: 100px" @click="cancel"
          >取消</el-button
        >
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      labelPosition: "left",
      form: {
        //领料日期
        inventoryDate: "",
        //盘点单号
        inventoryNo: "",
        facilityModel: "",
        facilityName: "",
        //批次号
        batchnum: "",
        //数量
        num: 0,
        //库存数量
        number: 0,
      },
      rules: {
        inventoryDate: [{ required: true, trigger: "blur" }],
        inventoryNo: [{ required: true, trigger: "blur" }],
        facilityModel: [{ required: true, trigger: "blur" }],
        facilityName: [{ required: true, trigger: "blur" }],
        batchnum: [{ required: true, trigger: "blur" }],
        num: [{ required: true, trigger: "blur" }],
        number: [{ required: true, trigger: "blur" }],
        unitPrice: [{ required: true, trigger: "blur" }],
        ID: [{ required: true, trigger: "blur" }],
      },
      select1: [],
      Select2: [],
      Select3: [],
      //器材编号
      wfacilityManagementId: "",
      ID: "",
      //盈亏
      Profit: "",
      //单位
      unit: "",
      tableData: [],
    };
  },
  methods: {
    cancel: function () {
      this.$router.push("/home/Kcpd");
    },
    save: function () {
      console.log(this.form);
      this.$axios({
        url: "/WInventoryManagement/add",
        method: "post",
        data: {
          //领料日期
          inventoryDate: this.form.inventoryDate,
          //盘点单号
          inventoryNo: this.form.inventoryNo,
          //制单人ID
          reviewedId: this.ID,
          preparedById: this.ID,
          //添加库存盘点明细
          winventoryDetailsAddDtos: [
            {
              //盘点单号
              inventoryNo: this.form.inventoryNo,
              //数量
              quantity: this.form.num,
              //批次号（入库单号）
              receiptNo: this.form.batchnum,
              //盈亏
              unitPrice: this.Profit,
              //器材编号
              wfacilityManagementId: this.wfacilityManagementId,
            },
          ],
        },
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("新增成功！");
          setTimeout(() => {
            this.$router.push("/Kcpd");
          }, 1000);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //渲染下拉框
    getSelect1: function () {
      this.$axios({
        url: "/wFacilityManagement/listName",
      }).then(({ data }) => {
        // console.log(data.data);
        this.select1 = data.data;
      });
    },
    select2: function () {
      this.$axios({
        url: "/wFacilityManagement/listMOdel",
        params: {
          facilityName: this.form.facilityName,
        },
      }).then(({ data }) => {
        // console.log(data);
        this.Select2 = data.data;
      });
    },
    select3: function () {
      this.$axios({
        url: "/wFacilityManagement/listNumber",
        params: {
          facilityModel: this.form.facilityModel,
          facilityName: this.form.facilityName,
        },
      }).then(({ data }) => {
        // console.log(data);
        this.wfacilityManagementId = data.data;
        this.$axios({
          url: "/WAccountDetails/list",
          params: {
            wfacilityManagementId: this.wfacilityManagementId,
          },
        }).then(({ data }) => {
          // console.log(data);
          this.Select3 = data.data;
        });
      });
    },
    //生成盘点单号
    getId: function () {
      this.$axios({
        url: "/WReturnManagement/addNo",
      }).then(({ data }) => {
        this.form.inventoryNo = data.data;
      });
    },
    //查询库存数量
    getCode: function () {
      this.$axios({
        url: "/WAccountDetails/list",
        method: "post",
        data: {
          receiptNo: this.form.batchnum,
          wfacilityManagementId: this.wfacilityManagementId,
        },
      }).then(({ data }) => {
        this.unit = data.data.wfacilityManagement.facilityUnit.unit;

        this.form.number = data.data.quantity;
      });
    },
    //topush
    topush: function () {
      let data = {
        inventoryNo: this.form.inventoryNo,
        //器材编号
        wfacilityManagementId: this.wfacilityManagementId,
        //器材名称
        facilityName: this.form.facilityName,
        //单位
        unit: this.unit,
        //库存
        number: this.form.number,
        // 盘点数
        num: this.form.num,
        //盘点盈亏
        Profit: this.Profit,
        //规格型号
        facilityModel: this.form.facilityModel,
      };
      this.tableData.push(data);
    },
  },
  mounted: function () {
    this.getSelect1();
    this.ID = JSON.parse(sessionStorage.getItem("user"))[0].id;
  },
  watch: {
    "form.num"() {
      this.Profit = this.form.num - this.form.number;
    },
    immediate: true,
  },
};
</script>
<style lang="less" scoped>
.tlAdd {
  padding: 20px;
}
.del_btn {
  font-size: 14px;
  color: #ffc5c5;
  background: #fef3f3;
  border-color: #fef3f3;
}
</style>